<!doctype html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="shortcut icon" href="#" />
    <link rel="stylesheet" type="text/css" href="{{pluginResources}}/Template/charProfile/charProfile.css" />
    <link rel="preload" href="{{pluginResources}}/fonts/Guruwords.ttf" as="font" />
    <link rel="preload" href="{{pluginResources}}/fonts/framdit.ttf" as="font" />
    <script src="{{pluginResources}}/Template/charProfile/echarts.common.min.js"></script>
</head>

<body id="body" {{sys.scale}} data-content='{{data}}'>
    <div>
        <div id="container">
            {{if data.roleDetail.data.weightVersion}}
            <div id="weight-version">当前权重文件版本 : v{{data.roleDetail.data.weightVersion}}</div>
            {{/if}}

            <div id="header">
                <div id="user-id">UID:{{data.uid}}</div>
                <div id="role-info-container">
                    <div id="role-info">
                        <div id="attribute-container">
                            <!-- 属性背景图 -->
                            <img src="{{pluginResources}}/Template/charProfile/imgs/attributeBG.png" id="attributeBG">
                            <img src="{{pluginResources}}/Template/charProfile/imgs/attribute/{{data.roleDetail.data.role.attributeId}}.png"
                                id="attribute-icon">
                        </div>

                        <div id="text-container">
                            <div id="role-name">{{data.roleDetail.data.role.roleName}}</div>
                            <div id="role-level">LV.{{data.roleDetail.data.role.level}}</div>
                        </div>
                    </div>
                    <!-- 根据星级动态生成星星图片 -->
                    <div id="role-stars" data-star-src="{{pluginResources}}/Template/charProfile/imgs/star.png"></div>
                    <!-- 星星图片的容器 -->
                </div>

                <!-- 角色图片 -->
                <div id="role-pic-container">
                    <img src="{{data.rolePicUrl}}">
                </div>

                <div id="chain">
                    <div id="chain-list">
                        {{each data.roleDetail.data.chainList chain}}
                        <img src="{{chain.iconUrl}}" actived="{{chain.unlocked}}">
                        {{/each}}
                    </div>
                </div>
            </div>
            <div id="skill">
                <div id="skill-list">
                    {{each data.roleDetail.data.skillList skill idx}}
                    {{if idx<5}} <div class="skill-item">
                        <img src="{{skill.skill.iconUrl}}" class="skill-icon">
                        <div class="skill-level">LV.{{skill.level}}</div>
                </div>
                {{/if}}
                {{/each}}
            </div>
        </div>
        <div class="total-score-table">
            {{if data.roleDetail.data.phantomData.statistic}}
            <div class="total-score-table-left">
                <div class="total-score-key">声骸总分</div>
                <div class="total-score-value" style="color: {{data.roleDetail.data.phantomData.statistic.color}};">
                    {{data.roleDetail.data.phantomData.statistic.totalScore.toFixed(2)}}</div>
                <div class="total-score-key">声骸评级</div>
                <div class="total-score-value" style="color: {{data.roleDetail.data.phantomData.statistic.color}};">
                    {{data.roleDetail.data.phantomData.statistic.rank}}</div>
            </div>
            <div id="column" style="position: relative;left: -20px;top: -30px;width:100%;height:249px;"></div>
            {{else}}
            <div style="color: #585858;font-style: italic;font-size: 50px;margin: 30px 134px;">
                当前角色暂无评分
            </div>
            {{/if}}
        </div>
        <div id="table">
            <div>
                <div id="weapon-icon-box">
                    <img src="{{data.roleDetail.data.weaponData.weapon.weaponIcon}}" id="weapon-icon">
                    <div class="phantom-level">LV.{{data.roleDetail.data.weaponData.level}}</div>
                </div>
                <div class="weapon-header-right">
                    <div id="weapon-name">{{data.roleDetail.data.weaponData.weapon.weaponName}}</div>
                    <div id="weapon-level-box">
                        <div id="weapon-star" data-star-src="{{pluginResources}}/Template/charProfile/imgs/star.png"
                            data-star-level="{{data.roleDetail.data.weaponData.weapon.weaponStarLevel}}">
                        </div>

                        <span id="reson-level"
                            style="background: {{data.roleDetail.data.weaponData.color}};">谐振 {{data.roleDetail.data.weaponData.resonLevel}} 阶</span>
                    </div>
                </div>
                <div id="weapon-effect-name">{{data.roleDetail.data.weaponData.weapon.weaponEffectName}}</div>
                <div id="effect-description">{{data.roleDetail.data.weaponData.weapon.effectDescription}}</div>
            </div>
            {{each data.roleDetail.data.phantomData.equipPhantomList phantom}}
            {{if phantom}}
            <div class="phantom-list">
                <div class="phantom-header">
                    <img src="{{phantom.phantomProp.iconUrl}}" class="phantom-icon">
                    <div class="phantom-level">+{{phantom.level}}</div>
                    <img src="{{phantom.fetterDetail.iconUrl}}" class="fetter-icon">
                    <div class="phantom-header-right">
                        <div class="phantom-name">{{phantom.phantomProp.name.replace("（","(").replace("）",")")}}</div>
                        {{if phantom.realScore}}
                        <div class="phantom-rank-score" style="color: {{phantom.color}};">
                            {{phantom.realScore.toFixed(2)}}-{{phantom.rank}}</div>
                        {{else}}
                        <div class="phantom-rank-score" style="color: #a0a0a0;">暂无评分</div>
                        {{/if}}
                    </div>
                </div>
                <div class="phantom-attribute">
                    {{each phantom.mainProps prop}}
                    <div class="phantom-attribute-item" style="font-weight: bold;">
                        <span class="phantom-attribute-key">{{prop.attributeName}}</span> <span
                            class="phantom-attribute-value">{{prop.attributeValue}}</span>
                    </div>
                    {{/each}}
                    {{each phantom.subProps prop}}
                    <div class="phantom-attribute-item" style="color: {{prop.color}};">
                        <span class="phantom-attribute-key">{{prop.attributeName}}</span> <span
                            class="phantom-attribute-value">{{prop.attributeValue}}</span>
                    </div>
                    {{/each}}
                </div>
            </div>
            {{/if}}
            {{/each}}
        </div>
        <div id="copyright">{{@copyright}}</div>
    </div>

    <script>
        window.addEventListener('load', function () {
            const img = document.getElementById('role-pic');

            // 动态生成星级
            const roleStarsContainer = document.getElementById('role-stars');
            const starLevel = parseInt('{{data.roleDetail.data.role.starLevel}}', 10); // 转换为数字
            const starSrc = roleStarsContainer.getAttribute('data-star-src'); // 获取星星图片的路径
            for (let i = 0; i < starLevel; i++) {
                const starImg = document.createElement('img');
                starImg.src = starSrc;
                starImg.classList.add('role-star');
                roleStarsContainer.appendChild(starImg);
            }

            const createStars = (containerId, starSrc, starLevel) => {
                const container = document.getElementById(containerId);
                for (let i = 0; i < starLevel; i++) {
                    const starImg = document.createElement('img');
                    starImg.src = starSrc;
                    starImg.classList.add(containerId === 'weapon-star' ? 'weapon-star' : 'phantom-star');
                    container.appendChild(starImg);
                }
            };

            // 动态生成 weapon-star 的星星
            const weaponStarContainer = document.getElementById('weapon-star');
            const weaponStarLevel = parseInt(weaponStarContainer.getAttribute('data-star-level'), 10);
            const weaponStarSrc = weaponStarContainer.getAttribute('data-star-src');
            createStars('weapon-star', weaponStarSrc, weaponStarLevel);
        });
    </script>
    <script>
        const dataContent = JSON.parse(document.getElementById('body').getAttribute('data-content'))

        const colorMap = {
            1: "rgb(53, 152, 219)",
            2: "rgb(224, 62, 45)",
            3: "rgb(185, 106, 217)",
            4: "rgb(45, 194, 107)",
            5: "rgb(241, 196, 15)",
            6: "rgb(230, 30, 144)"
        };

        document.querySelectorAll("#chain-list img").forEach(img => {
            const isActive = img.getAttribute("actived") === "true";
            img.className = isActive ? "chain-icon-actived" : "chain-icon-inactived";

            const color = colorMap[dataContent.roleDetail.data.role.attributeId];
            img.style.backgroundColor = color;

            const factor = isActive ? 1.2 : 0.8;
            const borderColor = `rgba(${color.slice(4, -1).split(",").map(c => parseInt(c) * factor).join(",")}, 0.6)`;
            img.style.border = `5px solid ${borderColor}`;
        });
    </script>
    <script>
        const handler = [
            (i) => i / 21,
            (i) => i / 10.5,
            (i) => i / 11.6,
            (i) => i / 11.6,
            (i) => i / 14.7,
            (i) => i / 12.4,
            (i) => i / 11.6,
            (i) => i / 11.6,
            (i) => i / 11.6,
            (i) => i / 11.6,
            (i) => i / 60,
            (i) => i / 580,
            (i) => i / 60,
        ]
        const computedColor = []
        const computedValue = []
        const data = dataContent.roleDetail.data.phantomData.statistic?.dist.map((tag, i) => {
            let name = tag.name
            if (name.includes("百分比")) name = "大" + name;
            name = name.replace(/(伤害加成|百分比)/, "");
            computedColor.push(tag.color.replace("color:", "").replace(";", ""));
            computedValue.push(handler[i](tag.value))
            return {
                name,
                value: tag.value.toFixed(1),
            }
        });


        const columnChart = echarts.init(document.getElementById('column'));

        const option = {
            animation: false,
            title: {
                text: ''
            },
            tooltip: {},
            legend: {
                data: ['成长值']
            },
            xAxis: {
                data: data.map(tag => tag.name),
                axisTick: {
                    length: 6,
                    lineStyle: {
                        type: 'dashed',
                    },
                    boundaryGap: true
                },
                axisLabel: {
                    color: "#000",
                    fontSize: 8,
                    rotate: 25,
                    align: 'center'
                },
            },
            yAxis: {
                max: 5,
            },
            series: [
                {
                    type: 'bar',
                    data: computedValue,
                    label: {
                        show: true,
                        position: 'top',
                        formatter: (params) => computedValue[params.dataIndex].toFixed(1) + `\n(${data[params.dataIndex].value + (!/^(生命|防御|攻击)$/.test(data[params.dataIndex].name) ? '%' : '')})`
                    },
                    itemStyle: {
                        normal: {
                            color: (params) => { return computedColor[params.dataIndex] }
                        }
                    },
                }
            ]
        };
        columnChart.setOption(option);
        document.getElementById('column').querySelector('canvas').style.width = '110%';
    </script>
</body>

</html>